<template>
  <el-card
    shadow="never"
    body-style="padding: 20px 20px 0px 20px;background:#FAFAFA"
    style="margin-top: 10px">
    <el-form
      ref="form"
      inline
      :model="form"
      class="form-options"
      label-width="100px"
      :rules="$rules.purchaseEquipmentRules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="器材分类" class="long-content" prop="equipmentTypeId">
            <el-cascader
              ref="roleTree"
              :options="treeData"
              v-model="form.equipmentTypeId"
              :props="treeProps"
              @change="treeChange"
              clearable
              :disabled="isReadOnly()||type==3"
              filterable
              placeholder="请选择器材分类"
              collapse-tags></el-cascader>
          </el-form-item>
          <el-form-item label="生产日期" prop="productionDate" v-if="type!=2&&type!=3">
            <el-date-picker
              v-model="form.productionDate"
              type="date"
              :disabled="isReadOnly()||type==3"
              value-format="yyyy-MM-dd"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="失效日期" prop="expirationDate" v-if="type!=2&&type!=3">
            <el-date-picker
              v-model="form.expirationDate"
              type="date"
              :disabled="isReadOnly()||type==3"
              value-format="yyyy-MM-dd"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="器材指南" class="long-content">
            <el-input
              type="textarea"
              disabled
              :rows="5"
              v-model="equipmentData.equipmentGuide">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="器材名称">
            <el-input v-model="equipmentData.name" disabled/>
          </el-form-item>

          <el-form-item label="器材型号">
            <el-input v-model="equipmentData.modelName" disabled/>
          </el-form-item>
          <el-form-item label="数量" prop="num">
            <el-input v-model="form.num" :disabled="isReadOnly()"/>
          </el-form-item>
          <el-form-item label="器材照片">
            <el-input v-model="equipmentData.equipmentImg" disabled/>
          </el-form-item>
          <el-form-item label="标签类型">
            <el-input v-model="equipmentData.labelTypeName" disabled/>
          </el-form-item>
          <el-form-item label="标签照片">
            <el-input v-model="equipmentData.labelInstallImg" disabled/>
          </el-form-item>
          <el-form-item label="标签规格">
            <el-input v-model="equipmentData.labelSizeName" disabled/>
          </el-form-item>
          <el-form-item label="安装方法">
            <el-input v-model="equipmentData.installMethodName" disabled/>
          </el-form-item>
          <el-form-item label="贴标方式">
            <el-input v-model="equipmentData.labelWayName" disabled/>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="danger" v-if="!isReadOnly()" @click="handleDelete">删除器材</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import { queryEquipmentDetailById, setEquipmentStop } from '@/api/warehouse'

export default {
  name: 'Equipment',
  props: {
    // 0为采购单管理、批次管理只读；1采购单管理、批次管理可编辑状态；2为入库只读;3为入库可编辑状态
    type: {
      type: Number,
      default: 0
    },
    form: {
      type: Object,
      default: function() {
        return {
          id: '',
          equipmentTypeId: [],
          expirationDate: '',
          num: '',
          productionDate: '',
          labelWay: '',
          shelfLife: ''
        }
      }
    }, treeData: {
      type: Array,
      default: function() {
        return []
      }
    },
    equipmentDataExtra: {
      type: Object,
      default: function() {
        return {
          id: '',
          name: '',
          model: '',
          modelName: '',
          parentId: '',
          category: '',
          labelType: '',
          labelTypeName: '',
          installMethod: '',
          installMethodName: '',
          labelSize: '',
          labelSizeName: '',
          labelWay: '',
          labelWayName: '',
          equipmentGuide: '',
          equipmentImg: '',
          labelInstallImg: ''
        }
      }
    }
  },
  data() {
    return {
      modelLoading: false,
      treeProps: { value: 'id', label: 'name' },
      equipmentData: {
        type: Object,
        default: function() {
          return {
            id: '',
            name: '',
            model: '',
            modelName: '',
            parentId: '',
            category: '',
            labelType: '',
            labelTypeName: '',
            installMethod: '',
            installMethodName: '',
            labelSize: '',
            labelSizeName: '',
            labelWay: '',
            labelWayName: '',
            equipmentGuide: '',
            equipmentImg: '',
            labelInstallImg: ''
          }
        }
      }
    }
  },
  mounted() {
    const data = {}
    Object.assign(data, this.equipmentDataExtra)
    this.equipmentData = data
  },
  methods: {
    isReadOnly() {
      return this.type == 0 || this.type == 2
    },
    handleDelete() {
      this.$confirm('确认删除此器材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$emit('onDelete', {})
      })
    },
    treeChange(item) {
      this.$parent.handleSelectEquipmentList()
      queryEquipmentDetailById({ equipmentTypeId: item[item.length - 1] }).then(res => {
        const data = res.resultData
        this.equipmentData = {
          name: data.name,
          model: data.model,
          modelName: data.modelName,
          equipmentTypeId: data.equipmentTypeId,
          parentId: data.parentId,
          category: data.category,
          labelType: data.labelType,
          labelTypeName: data.labelTypeName,
          installMethod: data.installMethod,
          installMethodName: data.installMethodName,
          labelSize: data.labelSize,
          labelSizeName: data.labelSizeName,
          labelWay: data.labelWay,
          labelWayName: data.labelWayName,
          equipmentGuide: data.equipmentGuide,
          equipmentImg: data.equipmentImg,
          labelInstallImg: data.labelInstallImg
        }
        this.form.labelWay = data.labelWay
      })
    },
    async validData() {
      const _this = this
      return new Promise(function(resolve, reject) {
        _this.$refs['form'].validate((valid) => {
          if (valid) {
            resolve()
            return true
          } else {
            reject()
            return false
          }
        })
      })
    },
    /**
     * 选择型号
     * @param item
     */
    handleSelectModel(item) {
      // console.log(item)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
